<template>
  <div class="dialogDetailMoney">
       <el-dialog
        title="订单退款"
        :visible.sync="dialogData.dialogVisibleM"
        :close-on-click-modal="false"
        width="500px"
      >
        <p class="topFont">*请先在微信/支付宝完成退款</p>
        <div class="nav">
            <div class="reason clearfloat" >
                <p>退款原因：</p>
                <el-input type="textarea" class="textarea" v-model="playBack" placeholder="请填写退款原因，5-200个字"></el-input>
                <div class="xing">*</div>
            </div>
            <div class="reason reasonSec clearfloat" >
                <p>已在微信/支付宝完成退款：</p>
                <div class="checkBox clearfloat">
                    <div class="left" @click="checkedBox(1)">
                        <img src="../../assets/img/xuan2.png" v-if="checkedFlag==2" />
                        <img src="../../assets/img/xuan1.png" v-if="checkedFlag==1" />
                        <!-- <img src="../../assets/img/xuan2.png" v-if="checkedFlag==0" /> -->
                        <span>是</span>
                    </div>
                    <div class="right"  @click="checkedBox(2)">
                        <!-- <img src="../../assets/img/xuan2.png" v-if="checkedFlag==0" /> -->
                        <img src="../../assets/img/xuan2.png"  v-if="checkedFlag==1" />
                        <img src="../../assets/img/xuan1.png" v-if="checkedFlag==2" />
                        <span>否</span>
                    </div>
                </div>
            </div>
            <p class="moneyFont" v-if="checkedFlag!=1">请先在微信/支付宝完成退款，再来操作订单退款！</p>
            <div v-if="checkedFlag==1" >
                <div class="setInter clearfloat">
                <span>验证码</span>
                <el-input class="codeInput" v-model="code"></el-input>
                <div class="getCode" v-if="flagCode!=1" @click="getCodeHandle">{{font}}</div>
                <div class="getCode getCodeSec" v-if="flagCode==1">{{font}}</div>
                <p class="codeError" v-if="codeError">{{message}}</p>
                </div>
                
                <div class="btnAll clearfloat">
                    <div class="sumit" @click="sumitHandle">确认退款</div>
                    <div class="sumitFlase" @click="sumitHandleFlase">取消</div>
                </div>
            </div>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import api from "@/fetch/url";
import { setInterval, clearInterval } from 'timers';
export default {
  props:["dialogData","id"],
  data() {
    return {
      codeError:false,
      code:"",
      font:"获取验证码",
      flagCode:0,
      index:60,
      time:"",
      checkedFlag:2,
      playBack:"",
      message:""
    }
  },
  created() {
       
  },
  computed: {
    
  },
　mounted() {
     
  },
  methods: {
    //点击提交按钮
    sumitHandle(){
         if(this.playBack.length<5||this.playBack.length>200){
             this.$message({
                message: "退款原因请输入5到200个字",
                type: "error",
             });
            return false;
         }
         if(this.code.length==0){
             this.$message({
                message: "请输入验证码",
                type: "error",
             });
            return false;
         }
          //refundSumit
          api.refundSumit({
                captcha: this.code,
                orderId:this.id-0,
                reason: this.playBack,
                thirdRefunded: 1
            }).then(json => {
                if(json.code==-1){
                     this.message=json.message;
                     this.codeError=true;
                    this.$message({
                        message: json.message,
                        type: "error",
                    });
                }else {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    });
                    this.codeError=false;
                    setTimeout(()=>{
                       this.$emit("sumitHandleFlaseFun",1);
                    },2000);
                }
            })
    },
    //点击取消按钮
    sumitHandleFlase(){
        this.$emit("sumitHandleFlaseFun");
    },
    checkedBox(index){
        switch(this.checkedFlag){
           case 0:
              this.checkedFlag=index;
             break;
           case 1:
             this.checkedFlag=2;
             break;
           case 2:
           this.checkedFlag=1;
             break;
        }
    },
    //点击获取验证码 
    getCodeHandle(){
      if(this.flagCode==0||this.flagCode==2){
            //调用获取验证码接口  refundCaptcha
            api.refundCaptcha({
                orderId:this.id-0
            }).then(json => {
                    this.flagCode=1;
                    this.font="重新获取("+this.index+")";
                    this.time=setInterval(()=>{
                        this.index--;
                        this.font="重新获取("+this.index+")";
                        if(this.index<=0){
                        this.flagCode=2;
                        this.index=60;
                        this.font="重新获取";
                        clearInterval(this.time);
                        }
                    },1000);
                
            })
            
      }
    },
     sureBtn(){

     }
  }
}
</script>
<style lang="scss">
.dialogDetailMoney .el-dialog__body {
   padding:0;
   .codeInput .el-input__inner {
     height:36px;
     line-height: 36px;
   }
   .reason {
       .textarea {
            width:350px;
            height:56px;
            .el-textarea__inner {
                // width:350px;
                height:56px;
            }
       }
   }
} 
</style>
<style lang="scss" scoped>
.dialogDetailMoney .el-dialog__body {
   .topFont {
     padding:0 20px 20px 20px;
     box-sizing: border-box;
     border-bottom: 1px solid #E9E9E9;
     font-size: 14px;
     color: #FC612A;
   }
   .nav {
     padding:20px 30px;
     box-sizing: border-box;
     p {
       font-size: 14px;
        color: #777777;
        letter-spacing: 0;
        line-height: 24px;
     }
     .setInter {
       padding:20px 0 0 0;
       box-sizing:border-box;
       span {
         float: left;
         height:36px;
         line-height:36px;
         font-size: 14px;
         color: #262626;
       }
       .codeInput {
         float: left;
         width:140px;
         margin-left:10px;
       }
       .sumit,.getCode {
         float: left;
         width:96px;
         height:36px;
         background: #FC612A;
         border-radius: 4px;
         line-height:36px;
         text-align:center;
         color:#fff;
         font-size: 14px;
         margin-left:12px;
         cursor: pointer;
       }
       .getCode {
         width:116px;
       }
       .getCodeSec {
         font-size: 14px;
         color: #777777;
         background: #F1F1F1;
       }
       .codeError {
           float: left;
           line-height:36px;
           margin-left:10px;
       }
     }
     .codeError {
    //    padding:10px 50px 20px 50px;
       font-size: 14px;
       color: #FC612A;
     }
     .btnAll {
         padding:40px 0 10px;
        .sumit,.sumitFlase {
         float: left;
         width:96px;
         height:36px;
         background: #FC612A;
         border-radius: 4px;
         line-height:36px;
         text-align:center;
         color:#fff;
         font-size: 14px;
         margin-left:12px;
         cursor: pointer;
       }
       .sumit {
           margin-left:120px;
       }
       .sumitFlase {
           background: #C3C3C3;
           border-radius: 4px;
       }
     }
     .reason {
         margin-bottom:15px;
         p {
             float: left;
         }
         .textarea {
             float: left;
         }
         .checkBox {
             .left{
                 float: left;
                 margin-right:30px;
                 margin-left:10px;
                 cursor: pointer;
                 img {
                     float: left;
                     width:18px;
                     height:18px;
                     margin-top:3px;
                     margin-right:5px;
                 }
                 span {
                     float: left;
                     font-size: 14px;
                    color: #262626;
                    letter-spacing: 0;
                    line-height: 24px;
                 }
             }
             .right {
                 float: left;
                  cursor: pointer;
                 img {
                     float: left;
                     width:18px;
                     height:18px;
                     margin-top:3px;
                     margin-right:5px;
                 }
                 span {
                     float: left;
                     font-size: 14px;
                    color: #262626;
                    letter-spacing: 0;
                    line-height: 24px;
                 }
             }
         }
     }
     .reasonSec {
          margin-bottom:0px;
         
     }
      .moneyFont{
              font-size: 14px;
              color: #FC612A;
              height:20px;
              margin:10px 0 30px 0;
          }
     
   }
}
.xing {
    float:left;
    margin-left:10px;
    font-size: 16px;
    color: #F52D2D;
}
</style>